1Strataix · Handoff — redlines, content, icons
Everything an engineer needs to build a pixel-exact Strataix without owning the design file: annotated screens with tokens, voice & tone rules, the final Phosphor icon set, and a short checklist for the first pull request.
2Redlines · KPI card
Spend
$4,182
+12.0% vs yesterday
260 (grid-span 2)
① radius 8
② border 1 · --sx-line
③ pad-y 12
④ pad-x 14
⑤ 12 / 400 · --sx-muted
⑥ 24 / 500 · tabular · -.01em
⑦ 11 Plex Mono · --sx-danger
⑧ 72×24 · stroke 1.5 · --sx-blue
gap 4px between elements
SPECS
1Radius · 8 · token --radius-md
2Border · 1px solid var(--sx-line) (#1a1d26) · emphasis uses --sx-line-2
3Padding · 12 × 14 · gap 4 between rows
4Width · grid-column span 2 of 12 (≈260 on 1440 canvas)
5Label · Plex Sans 12 / 400 · color --sx-muted
6Value · Plex Sans 24 / 500 · line-height 1.1 · letter-spacing -.01em · font-variant-numeric: tabular-nums
7Delta · Plex Mono 11 / 500 · color: positive --sx-ok · negative --sx-danger · neutral --sx-muted
8Sparkline · 72×24 · stroke 1.5 · vector-effect:non-scaling-stroke · no fill
3Redlines · buttons & focus ring
w: content + 28
h: 34 (pad 9)
r: 8
gap 6 between icon & text
focus: 3px · --sx-blue-tint-2
secondary
danger
SPECS
·Height · 34 (pad-y 9) · small variant 28 (pad-y 6)
·Padding-x · 14 default · 11 small · 18 large
·Radius · 8 everywhere · never a pill
·Font · Plex Sans 13 / 500 / line-height 1
·Icon · 14 or 16 · gap 6 · optical-align baseline
·Focus · box-shadow 0 0 0 3px in matching tint — blue, danger-tint, violet-tint
·Disabled · 40% opacity · cursor:not-allowed
·Loading · swap icon for 14px spinner; keep width (anti-jitter)
4Voice & tone · how Strataix talks
Operator tool for developers. Short, factual, present-tense. Numbers first. Blame the system, not the user. Never say "oops" or "oh no." Never use the word "powerful". Michroma stays in display; Plex Sans carries all UI copy.
Context
Say ✓
Not ✗
Alert · budget
Budget at 92% · exceeds Nov 27.
Heads up! You might go over your budget soon.
Error · auth
That key was rejected. Create a new one.
Oops! Something went wrong authenticating your request.
Empty state
No requests yet. Point your SDK at gateway.strataix.in/v1.
Nothing to see here! Why not try sending a request?
Success · toast
Route deployed · v12 · live in 4 regions.
Awesome! Your changes have been successfully deployed.
Destructive confirm
Revoking this key is immediate. Type the name to confirm.
Are you absolutely sure you want to do this?
Ask · AI result
Spend is up 44% on support/triage. Cache hit fell to 12%.
I think your spend might be higher than usual — want me to investigate?
Loading
Streaming response…
Please wait while we work our magic
WORDS WE LIKE
route · guardrail · budget · session · fallback · canary · cap · spend · hit · drift
WORDS WE AVOID
awesome · powerful · seamless · magic · effortless · revolutionary · simply · just · leverage · unlock
RULES
numbers in Plex Mono · sentence case · Oxford comma · no exclamation marks · dates as "Nov 27" not "27 Nov"
5Icon set · Phosphor regular · 38 names
One weight everywhere · regular · 16px inside controls, 18 in alerts, 20 in nav. Always paired with a text label — never standalone to represent an action.
NAV & CONCEPTS
overview
requests
sessions
routes
providers
guardrails
keys
budgets
alerts
settings
members
integrations
STATES & ACTIONS
ok
warn
critical
info
latency
finding
prune
ask / LLM
search
filter
add
retry
copy
export
open
more
disclosure
switcher
dismiss
slack
Need a glyph not in this set? Open an issue · #design-system. Don't ship one-offs.
6First-PR checklist
BEFORE YOU OPEN THE PR
Pulls from --sx-* tokens, not hex
Renders correctly in both dark and light
All text at least 12px · body 13–14
Numbers use tabular-nums + Plex Mono where they sit in columns
Buttons have hover, focus, disabled & loading
Icons from Phosphor regular (no fill, no bold)
Empty, loading, error states covered
Works at 390 (mobile), 810 (tablet) and 1440 (desktop)
Keyboard: tab order sensible · focus visible · esc dismisses overlays
ACCESSIBILITY · AA
Text contrast ≥ 4.5 : 1 against its surface (we validated --sx-text, --sx-muted, --sx-blue-text)
Non-text (chart lines, focus rings): ≥ 3 : 1
Never color alone: pair status color with an icon or label
Tap target min 44×44 on mobile, 32×32 on desktop
Motion respects prefers-reduced-motion
aria-label on icon-only buttons; role="status" on live regions (streaming, toasts)
Charts have a text alternative in the nearby copy
SKIM-LIST OF CANVAS PAGES (THIS PROJECT)
LandingWireframesHi-fiStyle Guide SitemapOnboardingDashboard · OverviewRequests SessionsRoutesProvidersGuardrails KeysBudgetsAlertsSettings · Appearance BillingMembersIntegrationsAudit log StatesMobilePatterns · modals/drawers/formsCommand palette · ⌘K EmailsPricingDocsChangelog Handoff · this page